<template>
  <div class="warp">
    <div class="film-info">
      <div class="film-info__title">
        {{ film.name }}<span>{{ film.grade }}分</span>
      </div>
      <div class="film-info__item">
        {{ film.category }} | {{ film.runtime }}分钟
      </div>

      <div class="film-info__more"></div>
    </div>

    <div class="body">
      <van-tabs v-model:active="curDate" sticky shrink>
        <van-tab
          v-for="(item, index) in displayShowDate"
          :key="index"
          :name="item.time"
          :title="item.label"
        >
          <van-cell v-for="item in list" :key="item.scheduleId">
            {{ item.filmLanguage }} - {{ item.salePrice }}
          </van-cell>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script lang="ts" setup>
import * as dayjs from "dayjs";
import { computed, watchEffect } from "vue";

import { getWeekTwoByDate } from "@/utils";
import useStore from "@/hooks/useStore";
import { useRoute } from "vue-router";
import { ref } from "vue";
import { watch } from "vue";

const { schedule } = useStore();
const route = useRoute();

const props = defineProps<{
  film: IFilm;
}>();

// 用于展示的日期
const displayShowDate = computed(() => {
  return props.film.showDate?.map((date) => {
    const label = `${getWeekTwoByDate(date * 1000)}${dayjs(date * 1000).format(
      "MM月DD日"
    )}`;
    return {
      time: date,
      label: label,
    };
  });
});

// 影院Id
const cinemaId = route.params.id as string;
// 当前选择的日期
const curDate = ref(props.film.showDate![0]);

watch(
  () => props.film.showDate,
  (newDate) => {
    console.log("电影变化", newDate);
    // 主动修改下 curDate
    curDate.value = newDate![0];
    console.log("curDate.value", curDate.value);
  },
  {
    // flush: "post", // 让回调延迟到下一轮真实DOM更新完成之后再触发，（让 curDate 修改慢一点）
  }
);

// 当前场次列表
const list = ref<ISchedule[]>([]);
// 为了让 schedule.getList 默认调用一次，可以选择使用 watchEffect
watchEffect(async () => {
  list.value = await schedule.getList(
    cinemaId,
    props.film.filmId,
    curDate.value
  );
});
</script>

<style lang="scss" scoped>
.warp {
  position: relative;
  background-color: #fff;
  &::before {
    position: absolute;
    top: -20px;
    left: 50%;
    margin-left: -10px;
    display: block;
    content: "";
    width: 0px;
    height: 0px;
    border-width: 10px;
    border-style: solid;
    border-color: transparent transparent red transparent;
  }

  .film-info {
    position: relative;
    display: flex;
    flex-direction: column;
    text-align: center;
    padding: 15px 0;
    box-sizing: border-box;

    &__title {
      margin-bottom: 5px;
      font-size: 16px;
      color: #000;

      span {
        color: var(--van-primary-color);
      }
    }

    &__item {
      font-size: 14px;
      color: #797d82;
    }

    &__more {
      position: absolute;
      top: 50%;
      right: 15px;
      transform: translateY(-50%);
      width: 5px;
      height: 5px;
      background-color: red;
    }
  }
}
</style>
